{% extends "template/layout.html" %} {% block content %}
<style>
    .profile_card {

        margin: 20px 50px 50px 50px;
        height: 500px;
    }
    #avatarImg{
        width: 200px;
        height: 200px;
        border-radius: 100px;
    }
    #avatarBtn{
        margin:10px 10px 10px 50px;
    }
    
</style>
<div class="panel panel-default">
    <div class="layui-card profile_card">
        <div class="layui-card-body">
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                <ul class="layui-tab-title">
                    <li class="layui-this">基本设置</li>
                    <li>头像</li>
                    <li>修改密码</li>

                </ul>
                <div class="layui-tab-content" style="height: 100px;">
                    <div class="layui-tab-item layui-show layui-form layui-form-pane ">
                        <form class="layui-form" lay-filter="basicform">
                            <div class="layui-form-item">
                                <label for="L_email" class="layui-form-label">手机</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="L_phone" name="phone" required lay-verify="phone"
                                        autocomplete="off" class="layui-input"> </div>

                            </div>
                            <div class="layui-form-item">
                                <label for="L_email" class="layui-form-label">邮箱</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="L_email" name="email" required lay-verify="email"
                                        autocomplete="off" class="layui-input"> </div>
                            </div>
                            <div class="layui-form-item">
                                <label for="L_username" class="layui-form-label">昵称</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="L_username" name="userName" required="" lay-verify="required"
                                        autocomplete="off" class="layui-input"> </div>
                            </div>
                            <div class="layui-form-item">
                                <label for="L_city" class="layui-form-label">角色</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="L_city" name="role" autocomplete="off" value="Admin" class="layui-input"
                                        disabled> </div>
                                <div class="layui-form-mid layui-word-aux">
                                    <span style="color: #5FB878">您的账号已完成注册，用户角色不支持修改。</span>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <button class="layui-btn" lay-filter="basicBtn" lay-submit>确认修改</button>
                            </div>
                        </form>
                    </div>
                    <div class="layui-tab-item">
                        <div class="avatar-add">

                            <div class="layui-upload">
                                <button type="button" class="layui-btn" id="avatarBtn">上传头像</button>
                                <p>支持jpg、png、gif，最大不能超过2M</p>
                                <div class="layui-upload-list">
                                    <img class="layui-upload-img" id="avatarImg">
                                    <p id="demoText"></p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-tab-item layui-form layui-form-pane ">

                        <div class="layui-form-item"> <label for="L_nowpass" class="layui-form-label">当前密码</label>
                            <div class="layui-input-inline"> <input type="password" id="L_nowpass" name="nowpass"
                                    required="" lay-verify="required" autocomplete="off" class="layui-input layui-form-danger">
                            </div>
                        </div>
                        <div class="layui-form-item"> <label for="L_pass" class="layui-form-label">新密码</label>
                            <div class="layui-input-inline"> <input type="password" id="L_pass" name="pass" required
                                    lay-verify="pass" autocomplete="off" class="layui-input"> </div>
                            <div class="layui-form-mid layui-word-aux">6到16个字符</div>
                        </div>
                        <div class="layui-form-item"> <label for="L_repass" class="layui-form-label">确认密码</label>
                            <div class="layui-input-inline"> <input type="password" id="L_repass" name="repass"
                                    required="" lay-verify="repass" autocomplete="off" class="layui-input"> </div>
                        </div>
                        <div class="layui-form-item"> <button class="layui-btn" key="set-mine" lay-filter="pwdSet"
                                lay-submit="">确认修改</button>
                        </div>


                    </div>
                </div>
            </div>
        </div>
    </div>



</div>


{% endblock %} {% block footer %}
<script>
    var personDetail = {};
    personDetail.userName = `{{profileDetail.userName}}`;
    personDetail.phone = `{{profileDetail.phone}}`;
    personDetail.email = `{{profileDetail.email}}`;
    personDetail.avatar = `{{profileDetail.avatar}}`;

    layui.use(['element', 'form', 'upload'], function () {
        var form = layui.form,
            element = layui.element,
            upload = layui.upload;
        //触发事件
        var active = {
            tabChange: function () {
                //切换到指定Tab项
                element.tabChange('demo', '22'); //切换到：用户管理
            }
        };
        form.val('basicform', personDetail); //填充基本信息

        $('.site-demo-active').on('click', function () {
            var othis = $(this),
                type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });

        //Hash地址的定位
        var layid = location.hash.replace(/^#test=/, '');
        element.tabChange('test', layid);

        element.on('tab(test)', function (elem) {
            location.hash = 'test=' + $(this).attr('lay-id');
        });
        //监听用户基本信息修改事件
        form.on('submit(basicBtn)', function (data) {
            var formData = data.field;
            $.post('/profile/basic', formData, function (res) {
                if (res.status != 200) {
                    layer.open({
                        title: '警告',
                        content: res.msg,
                        icon: 2,
                        skin: 'layer-ext-moon'
                    });
                    return;
                }
                layer.msg('修改成功！');
            })
            return false;
        });

        $("#avatarImg").attr('src', personDetail.avatar) //渲染头像显示

        //头像上传事件
        var uploadInst = upload.render({
            elem: '#avatarBtn',
            url: '/api/upload',
            accept: 'images',
            size: 2048, //限制文件大小，单位 KB
            before: function (obj) {
                obj.preview(function (index, file, result) {
                    $('#avatarImg').attr('src', result); //图片链接
                });
            },
            done: function (res) {
                //上传失败处理事件
                if (res.status != 200) {
                    return layer.msg('上传头像失败！');
                }
                var imgUrl = res.imgUrl;;
                //上传成功后执行修改操作
                $.post('/profile/avatar', {
                    imgUrl: imgUrl
                }, function (res) {
                    if (res.status != 200) {
                        layer.open({
                            title: '警告',
                            content: res.msg,
                            icon: 2,
                            skin: 'layer-ext-moon'
                        });
                        return;
                    }
                    layer.msg('头像成功！');
                })

            },
            error: function () {
                return layer.msg('上传失败！');
            }
        });

        //自定义验证规则
        form.verify({
            pass: [/(.+){6,12}$/, '密码必须6到12位'],
            repass: function (value) {
                if ($("#L_repass").val() != value) {
                    return '俩次输入密码不一致，请重新输入！'
                }
            },

        });

        //密码修改提交事件
        form.on('submit(pwdSet)', function (data) {
            var pwdData = data.field;
            $.post('/profile/pwd/update', pwdData, function (res) {
                if (res.status != 200) {
                    layer.open({
                        title: '警告',
                        content: res.msg,
                        icon: 2,
                        skin: 'layer-ext-moon'
                    });
                    return;
                }
                layer.msg('密码修改成功！');
                setTimeout(" window.location.href='/'",3000)
               
            })
            return false;

        })

    });
</script>
{% endblock %}
